<template>
	<view class="">
		<view class="counter" :class="{ small }">
			<text class="reduce" @click="reduce" :class="{ disabled: !enableReduce }">-</text>
			<input class="countNum" type="number" disabled v-model.number="count" @blur="onBlur" @focus="onFocus" />
			<text class="add" @click="add" :class="{ disabled: !enableAdd }">+</text>
		</view>
	</view>

</template>

<script>
	export default {

		name: 'number-input',

		data() {
			return {
				count: 0,
				oldCount: 0,
				tasteShow: true,
			};
		},

		props: {
			itemData: Object,
			value: {
				type: Number,
				default: 0,
			},
			itemIndex: Number,
			max: {
				type: Number,
				default: 99,
			},
			small: Boolean,
			itemvalue: Object
		},

		computed: {
			enableAdd() {
				return this.count < this.max;
			},
			enableReduce() {
				return this.count > 0;
			},
		},

		watch: {
			value() {
				this.count = this.value;
			},

			count() {
				this.$emit('input', this.count);
			},
		},

		mounted() {
			this.count = this.value;
			// 口味选择
			// this.bus.$on('addPopu',(v) =>{
			// 	// this.count = this.count + 1;
			// })
		},

		methods: {
			reduce() {
				if (this.enableReduce) {
					this.bus.$emit('menuShowBus', true, this.itemIndex)
					// this.count = this.count - 1;
					// this.emitChange();

				}
			},
			add() {
				if(this.itemvalue.status === 2) return this.showToast('商品已售空！')
                // 有sku
				if (this.enableAdd && this.itemvalue.hjDishFlavorVos) {
					this.bus.$emit('tasteShowFun', true, this.itemIndex)
					// this.count = this.count + 1;
					// this.emitChange();
				}else{
                   
                    this.bus.$emit('busPlaceAnOrder',this.itemvalue)
                }
			},

			onFocus() {
				this.oldCount = this.count;
			},
			onBlur() {
				if (this.count >= this.max) {
					this.count = this.max;
				}
				if (this.count <= 0) {
					this.count = 0;
				}
				if (this.oldCount !== this.count) {
					this.emitChange();
				}
			},
			emitChange() {
				// this.$emit('change', this.count);
				this.bus.$emit('ReduceQuantity', this.count, this.itemIndex)
			},
		},
	};
</script>

<style lang="scss" scoped>
	.counter {
		display: flex;

		.reduce,
		.add {
			width: 28px;
			height: 28px;
			border-radius: 50%;
			font-size: 24px;
			line-height: 23px;
			display: flex;
			align-items: center;
			justify-content: center;

			// font-weight: bolder;
			&.disabled {
				opacity: 0.5;
			}
		}

		.reduce {
			background: rgba(239, 65, 41, 0.2);
			color: $uni-text-color-zbt-f;
		}

		.countNum {
			margin: 0 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 48px;
			font-size: 16px;
			color: $uni-text-color;
		}

		.add {
			background: $uni-text-color-zbt-f;
			color: $uni-text-color;
		}

		&.small {
			.countNum {
				margin: 0 10px;
				width: 48px;
			}
		}

	}
</style>